import Base from "../base.js";
import cinemasApi from "../../api/cinemas.js";

export default class extends Base {
    constructor(props) {
        super(props);
        this.data = {
            cinema: {
                _id: props._id,
            }
        }
    }

    render() {
        this.$el.html(`
        <div>
            <div>
                <div style="margin-top:2px;">
                    <a href="/#/info/cinemas" style="font-size:16px; color:rgba(0,0,0,0.4);">影院信息</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                    <a href="/#/info/upload-imgs" style="font-size:16px;">上传图片</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i> 
                </div>
                <hr>
                <h1 style="margin:20px 40px;">图片上传</h1>
            </div>
           
            <table  class="layui-table;" style="margin-left:40px; width:95%;">
                <tbody class="layui-table" >
                    <tr style="font-size:20px;">
                        <td style="width:100px; font-size:18px;text-align:center;">影院名称</td>
                        <td class="cinema-name" style="font-size:18px;"></td> 
                    </tr>
                    <tr style="height:200px;">
                        <td style="font-size:18px;text-align:center;">海报列表</td>
                        <td class="imgs"></td>
                    </tr>
                </tbody>
            </table>
            <button type="button" class="layui-btn" id="upload-btn" style="margin:20px 40px">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <i style="color:rgba(0,0,0,0.2); font-size:14px;">双击海报,即可删除</i>
        </div>
        `)
        this.$cinemaNameEle = $('.cinema-name');
        this.$imgsEle = $(".imgs");

    }

    async getOne() {
        const { _id } = this.data.cinema;
        this.data.cinema = await cinemasApi.getOne(_id);
    }
    // 将从后台获取到的数据重新渲染在页面上
    rerender() {
        const { name } = this.data.cinema;
        this.$cinemaNameEle.html(name);
        const imgsStr = _.map(this.data.cinema.imgs, item => {
            return `<img style="max-width:120px;height:160px; margin:10px;" src="/resource${item}"/>`;
        });
        this.$imgsEle.html(imgsStr);
    }

    // 渲染完成后执行
    async mounted() {
        await this.getOne();
        this.rerender();
    }

    // 图片删除事件
    async delete(e) {
        window.alert('确定删除吗');
        const { _id } = this.data.cinema;
        const url = $(e.target).attr("src").replace('/resource', '');
        const data = await cinemasApi.deleteImg({ _id, url });
        this.data.cinema = data;
        layer.msg(`删除成功`, { icon: 1 });
        this.rerender();
    }

    handle() {
        this.upload = layui.upload;
        this.upload.render({
            elem: '#upload-btn', //绑定元素
            url: '/resource/cinemas/upload', //上传接口
            data: {
                _id: () => {
                    return this.data.cinema._id;
                },
            },
            // 开通上传多个文件
            multiple: true,
            done: res => {
                //上传完毕回调
                this.data.cinema = res;
                this.rerender();
            },
            error: function () {
                //请求异常回调
                console.log('请求异常！！！');
            }
        });
        // 给图片添加点击删除事件
        this.$imgsEle.on('dblclick', 'img', this.delete.bind(this));
    }
}